<template>
  <el-alert class="meark_alert" :type="type" :closable="closable" curpagename="meark_alert_987490832">
    <div class="meark_alert_content" :class="{closeabled:closable}">
      <div class="meark_alert_icon " v-if="!hideIcon" :class="{has_alert_title:title ||titleSlot}">
        <template v-if="iconSlot">
          <slot name="icon"></slot>
        </template>
        <template v-else>
          <el-icon size="16"><Warning /></el-icon>
        </template>
      </div>
      <div class="meark_alert_desc">
        <div class="meark_alert_desc_title" v-if="titleSlot">
          <slot name="title"></slot>
        </div>
        <div class="meark_alert_desc_title" v-if="title && !titleSlot">
          {{ title }}
        </div>

        <template v-if="defaultSlot">
          <slot></slot>
        </template>

        <template v-if="description && !defaultSlot">
          {{ description }}
        </template>
      </div>
    </div>
  </el-alert>
</template>
<script lang="ts" setup  >
import { ref, defineProps, useSlots } from "vue";
const props = defineProps({
  type: {
    type: String,
    default: "info"
  },
  title: { type: String },
  description: { type: String },
  closable: { type: Boolean, default: false },
  hideIcon: { type: Boolean, default: false }
});
const defaultSlot = !!useSlots().default;
const titleSlot = !!useSlots().title;
const iconSlot = !!useSlots().icon;
</script>
<style lang="scss" scoped>
$--el-alert-padding: 5px 16px;
$--el-alert-description-font-size: 12px;
$--el-alert-color: #646567;
$--el-alert--success-light-color: #f7ffee;
$--el-alert--success-light-bg: #f7ffee;
$--el-alert--error-light-color: #fff2f3;
$--el-alert--error-light-bg: #fff2f3;
$--el-alert--warning-light-color: #fff8e6;
$--el-alert--warning-light-bg: #fff8e6;
$--el-alert--info-light-color: #ecf7ff;
$--el-alert--info-light-bg: #ecf7ff;
.meark_alert {
min-height: 30px;
    padding:$--el-alert-padding;
  :deep(.el-alert__content) {
    flex: 1;
  }
 :deep(.el-alert__close-btn){
    top: 7px;
  }
  .meark_alert_content {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    .meark_alert_icon {
      transform: translateY(1px);
      &.has_alert_title{
        transform: translateY(4px);
    }
    }
 
    .meark_alert_desc {
      flex: 1;
      color: $--el-alert-color;
      font-size: 13px;
      .meark_alert_desc_title {
        margin-bottom: 4px;
        font-weight: 500;
        word-break: break-word;
        font-size: 18px;
      }
    }
    &.closeabled{
        padding-right: 30px;

    }
  }
}

.meark_alert.el-alert.el-alert--success {
  background: $--el-alert--success-light-bg;
  &.is-light {
    color: $--el-alert--success-light-color;
  }
}

.meark_alert.el-alert.el-alert--error {
  background: $--el-alert--error-light-bg;
  &.is-light {
    color: $--el-alert--error-light-color;
  }
}
.meark_alert.el-alert.el-alert--warning {
  background: $--el-alert--warning-light-bg;
  &.is-light {
    color: $--el-alert--warning-light-color;
  }
}
.meark_alert.el-alert.el-alert--info {
  background: $--el-alert--info-light-bg;
  &.is-light {
    color: $--el-alert--info-light-color;
  }
}


</style>